<template>
  <div class="app-container">
    <!-- 移动端骨架屏 -->
    <mobile-skeleton 
      v-if="isMobile && loading" 
      :showHeader="true"
      :showForm="true"
      :formFields="3"
      :showPagination="false"
    />

    <div v-else>
      <el-row :gutter="24">
        <el-col :span="1">
          <img
            :src="backImg"
            style="width:25px;height:25px;cursor:pointer"
            @click="handleBack"
          >

        </el-col>

        <el-col
          :span="24"
          style="margin: 10px 0"
        >
          <el-card class="box-card">
            <div
              slot="header"
              class="clearfix"
            >
              <el-row :gutter="10">
                <el-col :span="12">
                  <div><strong>考试名称：</strong>{{ data.name }}</div>
                </el-col>
                <el-col :span="12">
                  <div><strong>考生：</strong>{{ data.user }}</div>
                </el-col>

              </el-row>
            </div>
            <el-alert
              title="请对每题进行打分，未进行批阅提交后，系统默认得分0分，且提交后不可修改，请知悉！"
              type="error"
              style="margin-bottom: 10px"
            />
            <div
              class="text item"
              v-for="(item, index) in questions"
              :key="item.id"
              style="width:50%"
            >

              <el-form
                ref="form"
                label-width="120px"
              >
                <el-form-item :label='index + 1 + "."'>

                  <div v-html="item.stem"></div>
                </el-form-item>
                <el-form-item label="答卷">
                  <el-input
                    type="textarea"
                    v-model="item.value"
                    disabled
                    placeholder="请填写答案"
                  ></el-input>
                </el-form-item>
                <el-form-item label="本题得分">

                  <el-input-number
                    v-model="item.score"
                    :min="0"
                    :max="10"
                    label="描述文字"
                    :disabled='!show'
                  >
                  </el-input-number>
                </el-form-item>
              </el-form>
            </div>

          </el-card>

        </el-col>

        <el-col :span="24" v-if="!isMobile">
          <el-button
            :loading="loading"
            type="primary"
            @click="submitForm"
            :style="{ backgroundColor: theme, borderColor: theme, fontWeight: 'bold' }"
            v-show="show"
          >
            提交
          </el-button>
        </el-col>

      </el-row>

      <!-- 移动端提交按钮 -->
      <div class="mobile-action-container" v-if="isMobile && show">
        <el-button
          type="primary"
          @click="submitForm"
          :loading="loading"
          :style="{
            backgroundColor: theme,
            borderColor: theme
          }"
        >
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import backImg from "@/assets/images/back.png";
import {
  updateMarkingExam,
  TextAnswerMark,
  updateTextAnswerMark,
} from "@/api/vadmin/exam/making";
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import MobileSkeleton from "@/components/MobileSkeleton";
import "@/assets/styles/mobile/exam.scss";
export default {
  components: { MobileSkeleton },
  data() {
    return {
      backImg: require("@/assets/images/back.png"),
      loading: true,
      show: true,
      data: {}, //试卷信息
      questions: [],
      activeName: "first",
      options: [],
      testOptions: [],
      submitLoading: false,
      selectionArray: [],
      singleScore: 0,
      multipleScore: 0,
      truefalseScore: 0,
      textScore: 0,
      isMobile: false,
      mediaQueryList: null,
      question: {},
      totalTimeInSeconds: 0,
      timeLeft: "",
      intervalId: null,
      hours: "00",
      minutes: "00",
      seconds: "00",
    };
  },
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
  },
  created() {
    this.data = this.$route.params.row;
    this.getTextAnswerMark(this.data);
  },

  methods: {
    getTextAnswerMark(data) {
      TextAnswerMark({ paper: data.id }).then((response) => {
        this.questions = response;
        this.loading = false;
      });
    },

    handleBack() {
      this.$router.back()//返回浏览器上一页，并保留上一页数据
    },
    submitForm() {
      // console.log(222222, this.questions);
      //打分
      this.loading = true;
      for (let i in this.questions) {
        updateTextAnswerMark(this.questions[i].id, {
          score: this.questions[i].score,
          is_marked: true,
        }).then((res) => {
          // console.log(111, res);
          this.updateMarking();
        });
      }
      //修改阅卷状态
    },
    updateMarking() {
      // console.log(2222, this.data);
      updateMarkingExam(this.data.id).then((res) => {
        // console.log("已阅卷");
        this.msgSuccess("提交成功");
        this.loading = false;
        this.show = false;
      });
    },
  },

  mounted() {
    // 使用媒体查询API直接监听视口变化
    this.mediaQueryList = window.matchMedia('(max-width: 767px)');
    
    // 初始化isMobile状态
    this.isMobile = this.mediaQueryList.matches;
    
    // 为媒体查询添加监听器
    const handleMediaChange = (e) => {
      this.isMobile = e.matches;
      
      // 强制组件重新渲染
      this.$forceUpdate();
    };
    
    // 使用适当的API添加监听器
    if (this.mediaQueryList.addEventListener) {
      this.mediaQueryList.addEventListener('change', handleMediaChange);
    } else {
      // 旧版浏览器支持
      this.mediaQueryList.addListener(handleMediaChange);
    }
    
    // 存储监听器以便后续移除
    this.mediaChangeHandler = handleMediaChange;
  },
  
  beforeDestroy() {
    // 移除媒体查询监听器
    if (this.mediaQueryList) {
      if (this.mediaQueryList.removeEventListener) {
        this.mediaQueryList.removeEventListener('change', this.mediaChangeHandler);
      } else {
        // 旧版浏览器支持
        this.mediaQueryList.removeListener(this.mediaChangeHandler);
      }
    }
  },
};
</script>

<style scoped>
.pre-exam div {
  line-height: 42px;
  color: #555555;
}
</style>